<template>
	<view class="work">
		<block v-if="!boxHide">
			<view class="bar_top">
				<view class="search">
					<view class="search_input">
						<image src="/static/images/search.png" mode=""></image>
						<input type="text" placeholder="请输入关键词" v-model="search" />
						<image src="/static/images/empty_btn.png" @click.stop="emptyValue" v-show="showEmptyBtn"></image>
					</view>
					<view class="search_btn" @tap="searchBtn()">搜索</view>
				</view>

				<view class="finance_bar">
					<view>查询范围：</view>
					<picker mode="selector" :range="typeList" @change="getPickerValue" :data-name="'typeIndex'">
						<view class="finance_bar_picker">
							<view>{{typeList[typeIndex]}}</view>
							<image src="/static/images/bar_down.png"></image>
						</view>
					</picker> 
					<picker v-if="isShow" mode="selector" :range="departmentOrSelfList" @change="getPickerValue" :value="departmentOrSelfListIndex"
					 :data-name="'departmentOrSelfListIndex'" range-key="name">
						<view class="finance_bar_picker">
							<view>{{departmentOrSelfList[departmentOrSelfListIndex].name}}</view>
							<image src="/static/images/bar_down.png"></image>
						</view>
					</picker>
					<picker mode="selector" :range="statusList" @change="getPickerValue" :data-name="'statusIndex'" range-key="value">
						<view class="finance_bar_picker">
							<view>{{statusList[statusIndex].value}}</view>
							<image src="/static/images/bar_down.png"></image>
						</view>
					</picker>
					<!-- <view class="finance_bar_btn">应收未完成</view> -->
				</view>

				<view class="finance_bar">
					<view>查询时间：</view>
					<view class="finance_bar_picker"> 
						<view><Time :fields="'minute'" :showTime="false" :lang="false" :time="start" @getDate="getStart"></Time> </view>
						<image src="/static/images/bar_down.png"></image>
					</view>
					
					<!-- <picker mode="date" fields="day" @change="getStart">
						<view class="finance_bar_picker"> 
							<view>{{start == "" ? "请选择开始时间" : start}}</view>
							<image src="/static/images/bar_down.png"></image>
						</view>
					</picker> -->
					<!-- <Time :fields="'minute'" :lang="false" :time="end" @getDate="getEnd"></Time> -->
					<!-- <picker mode="date" fields="day" @change="getEnd">
						<view class="finance_bar_picker">
							<view>{{end}}</view>
							<image src="/static/images/bar_down.png"></image>
						</view>
					</picker> -->
				</view>

				<view class="finance_bar"> 
					<view style="color:white;">查询时间：</view>
					<view class="finance_bar_picker">
						<view><Time :fields="'minute'"  :lang="false" :time="end" @getDate="getEnd"></Time> </view>
						<image src="/static/images/bar_down.png"></image>
					</view>
				</view>

			</view>

			<view class="work_list">
				<block v-for="(item,index) in list">
					<view class="work_item" @click.stop="navGo(item)" :key="index">
						<view class="work_userInfo">
							<image class="work_userInfo_img" :src="item.avatar" mode="aspectFill"></image>
							<view>
								<view class="work_userInfo_info">
									<view>{{item.customer_title}}</view>
									<view class="work_userInfo_info_phone">
										<image src="/static/images/icon_phone.png"></image>
										<text>{{item.customer_mobile}}</text>
									</view>
								</view>
								<view class="work_userInfo_time">{{item.create_at?item.create_at:"暂无创建时间"}}</view>
							</view>
							<view class="status_view">
								<view :class="item.status ? 'work_userInfo_laber color_green' : 'work_userInfo_laber color_blue'">{{item.status}}</view>
								<button type="default" class="giveUpBtn" @click.stop='giveUpOrder(item)' v-if="showGiveUpBtn(item)">弃用</button>
							</view>
						</view>
						<view class="work_userInfo_type">
							<view class="work_userInfo_type_item">
								<text>工单类型：</text><text>{{item.type}}</text>
							</view>
							<view class="work_userInfo_type_item">
								<text>负责人：</text><text>{{item.exec_user?item.exec_user:'暂无'}}</text>
							</view>
						</view>
						<view class="work_userInfo_addr">
							<text>地址：</text><text>{{item.province}}{{item.city}}{{item.area}}{{item.address}}</text>
						</view>
						<view class="work_userInfo_content">
							<text>派工内容：</text><text>{{item.content}}</text>
						</view>
					</view>
				</block>
			</view>

			<view class="bottom_btn" v-if="checkPermission([30001])">
				<view class="bottom_btn_list">
					<view @click.stop="goSelects">派单</view>
				</view>
			</view>
		</block>

		<Loading ref="load"></Loading>

		<!-- 底部选择 -->
		<bt-selects ref='btSelect'></bt-selects>
	</view>
</template>
 
<script>
	import Loading from "../../components/loading/loading.vue";
	export default {
		components: {
			Loading
		},
		data() {
			return {
				boxHide: true,
				loading: true,
				isShow: false,
				page: 1,
				search: "",
				list: [],
				typeList: [],
				departmentOrSelfList: [{
						name: "自己",
						id: 1
					},
					{
						name: "本部门",
						id: 2
					},
				],
				departmentOrSelfListIndex: 1,
				statusList: [],
				typeIndex: 0,
				statusIndex: 0,
				start: "",
				end: "",
				showEmptyBtn:false,
			}
		},
		onLoad(options) {
			this.departmentOrSelfListIndex=this.$store.getters.userInfo.branch_type != 1 ? 0 : 1;
			this.end = this.$api.getNowTime();
			this.userId = options.userId;
			this.$api.getWorkType({}).then(res => {
				this.typeList = res;
				this.typeList.unshift('全部类型')
			})
			this.$api.getWorkStatus({}).then(res => {
				this.statusList = res;
				this.statusList.unshift({
					value: '全部状态'
				})
				this.statusList.push({
					key:-1,
					value: '超时'
				})
			})
			this.isShow = this.$store.getters.userInfo.branch_type == 1 ? true : false;
		},
		onShow() {
			if (this.$app.globalData.upData.work) {
				this.getData(1);
			} else {
				this.boxHide = false
			}
		},
		onUnload() {
			this.$app.globalData.upData.work = true;
		},
		onHide() {
			this.boxHide = this.$hideBox
		},
		onReachBottom() {
			if (this.loading) {
				this.getData(3);
			}
		},

		methods: {
			emptyValue(){
				this.search='';
				this.getData(1);
			},
			//弃用工单
			giveUpOrder(item) {
				let _this = this;
				uni.showModal({
					title: '温馨提示',
					content: '确认弃用该工单?',
					success(res) {
						if (res.cancel) return false;
						_this.$api.giveUpWork({
							work_id: item.id
						}).then(res => {
							_this.getData(1);
						})
					}
				})
			},
			//检测是否显示弃用按钮
			showGiveUpBtn(item) {
				let status = (item.status == '未派工' || item.status == '进行中') ? true : false;
				return (this.checkPermission([30005]) && status) ? true : false;
			},
			navGo(item) { //页面跳转 '/pages/work/info/info',
				let src = item.status != '未派工' ? '/pages/work/info/info?workOrderId=' + item.id : '/pages/work/add/add?status=4' +
					"&workOrderId=" + item.id
				uni.navigateTo({
					url: src
				})
			},
			getPickerValue(e) {
				this[e.currentTarget.dataset.name] = e.detail.value;
				this.getData(1);
			},
			getStart(e) {
				 //this.start = e.detail.value;
				 if(e){
					this.start = e.date;
					this.getData(1);
				 }
			},
			getEnd(e) {
				 //this.end = e.detail.value;
				this.end = e.date;
				if (this.start.length > 0) {
					this.getData(1);
				}
			},
			getData(type) {
				this.$refs.load.initLoading({
					loadType: type
				}).then(res => {
					this.boxHide = false;
					if (type == 1) {
						this.list = [];
						this.page = 1;
						this.$app.globalData.upData.work = false;
					}
					let upJson = {
						page: this.page,
						search: this.search,
						exec_user_id: uni.getStorageSync("userId"),
						belong: this.departmentOrSelfList[this.departmentOrSelfListIndex].id
					}
					if (this.start.length > 0) {
						upJson.start = this.start;
						upJson.end = this.end
					}
					if (this.statusIndex > 0) {
						upJson.status = this.statusList[this.statusIndex].key
					}
					if (this.typeIndex > 0) {
						upJson.type = this.typeList[this.typeIndex]
					}

					this.$api.getWorkList(upJson).then(res => {
						this.$refs.load.getLoadingData({
							oldData: this.list,
							newData: res.data
						}).then(res => {
							this.list = res.list;
							// console.log(this.list)
							this.loading = res.loading;
							this.page++;
						})
					})
				})
			},
			// 派单选择
			goSelects() {
				let _this = this;
				this.$refs.btSelect.handleShow({
					actions: [{
						name: '预约单',
						color: '#333'
					}, {
						name: '派单',
						color: '#333'
					}],
					success(res) {
						switch (res.id) {
							case 0:
								_this.go('/pages/work/add/add?status=3');
								break;
							case 1:
								_this.go('/pages/work/add/add?status=1');
								break;
						}
					}
				})
			},
			go(url) { //1直接派单 3 预约单
				uni.navigateTo({
					url
				})
			},
			searchBtn() { //搜索
				this.getData(1);
			}
		},
		watch:{
			search(val){
				this.showEmptyBtn=val==""?false:true;
			}
		}
	}
</script>

<style>
	.work {
		padding-bottom: 90upx;
	}

	.work_list {
		margin-top: 330rpx;
	}

	.work_item {
		width: 690upx;
		background: #FFFFFF;
		margin: 30upx 0 0 30upx;
		padding: 30upx;
		box-sizing: border-box;
	}

	.work_item .status_view {
		min-width: 120rpx;
		text-align: right;
		position: relative;
	}

	.work_userInfo {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		font-size: 30upx;
		color: #333333;
		position: relative;
		justify-content: space-between;
	}

	.work_userInfo .giveUpBtn {
		padding: 0 10rpx;
		font-size: 26rpx;
		width: 90rpx;
		height: 50rpx;
		line-height: 50rpx;
		color: #999;
		margin: 0;
		position: absolute;
		top: 50rpx;
		right: 0;
	}

	.work_userInfo_img {
		width: 70upx;
		height: 70upx;
		background: #EEEEEE;
		border-radius: 50%;
		margin-right: 20upx;
	}

	.work_userInfo_info {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
	}

	.work_userInfo_info_phone {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 0 20upx;
	}

	.work_userInfo_info_phone image {
		width: 26upx;
		height: 26upx;
	}

	.work_userInfo_time {
		font-size: 24upx;
		color: #9BA7B7;
		margin-top: 5upx;
	}

	.work_userInfo_laber {
		margin-left: auto;
		font-size: 28upx;
		flex-shrink: 0;
	}

	.work_userInfo_type {
		font-size: 26upx;
		margin-top: 30upx;
		display: flex;
		flex-direction: row;
		color: #9BA7B7;
	}

	.work_userInfo_type_item:nth-child(2) {
		margin-left: 40upx;
	}

	.work_userInfo_type_item text:nth-child(2),
	.work_userInfo_addr text:nth-child(2),
	.work_userInfo_content text:nth-child(2) {
		color: #333333;
	}

	.work_userInfo_addr {
		font-size: 26upx;
		color: #9BA7B7;
		margin: 10upx 0 30upx 0;
	}

	.work_userInfo_content {
		padding-top: 30upx;
		border-top: 2upx solid #EEEEEE;
		font-size: 28upx;
		color: #9BA7B7;
	}

	.finance_bar {
		width: 100%;
		height: 70upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 28upx;
		color: #9BA7B7;
		padding: 0 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
	}

	.finance_bar_picker {
		margin-right: 30upx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.finance_bar_picker image {
		width: 22upx;
		height: 10upx;
		margin-left: 10upx;
	}

	.finance_bar_btn {
		margin-left: auto;
		color: #333333;
	}
</style>
